<template>
	<view class="login-container">
		<div></div>
		<image class="logo" src="/static/login.png" style="margin-left: 50rpx;"> </image>
		<view>
			<view class="">

				<div class="myinput">
					<div>用户名：</div>
					<u-input v-model="username" type="text" :border="true" :password-icon="true" placeholder="请输入用户名" />
				</div>
				<div class="myinput">
					<div>密&nbsp;&nbsp;&nbsp;码：</div>
					<u-input v-model="password" type="password" :border="true" :password-icon="true" placeholder="请输入密码" />
				</div>
			</view>
			<button @click="login" class="loginBtn">登录</button>
		</view>
		<u-toast ref="loginToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "admin",
				password: "admin",
			};
		},
		methods: {
			login() {
				if (this.username == "" || this.password == "") {
					this.$refs.loginToast.show({
						title: '用户名或密码未输入',
						type: 'error',
					})
					return;
				}

				// 简单的登录逻辑，可以根据实际需求进行修改
				if (this.username === "admin" && this.password === "admin") {
					// 登录成功，跳转到首页或其他页面
					uni.redirectTo({
						url: "/pages/home/home",
					});

				} else {
					// 登录失败，可以给出提示
					// uni.showToast({
					// 	title: "用户名或密码错误",
					// 	icon: "none",
					// });
					this.$refs.loginToast.show({
						title: '用户名或密码错误',
						type: 'error',
					})
				}
			},
		},
		onLoad() {
			// 去除标题
			uni.setNavigationBarTitle({
				title: "",
			});

			// 隐藏整个导航栏
			uni.setNavigationBarColor({
				frontColor: "#000000", // 标题文字颜色
				backgroundColor: "#ffffff", // 背景颜色
				animation: {
					duration: 0, // 可以设置动画持续时间，这里设为0表示无动画
				},
				success() {
					console.log("隐藏导航栏成功");
				},
			});
		},
	};
</script>

<style scoped>
	/* 根据实际需要添加样式 */
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 90vh;
		overflow: hidden;
		/* 隐藏滚动条 */
	}

	.logo {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	.myinput {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		padding-left: 0px;
	}

	.loginBtn {
		margin-left: 80px;
	}

	button {
		width: 50%;
		height: 40px;
		background-color: #007aff;
		color: #fff;
		border: none;

	}
</style>